<template>
  <div class="my-tasks-container">
    <el-card>
      <div slot="header">
        <span>待办任务</span>
      </div>
      
      <el-table :data="tasks" style="width: 100%">
        <el-table-column prop="instance.id" label="ID" width="80" />
        <el-table-column prop="instance.title" label="标题" show-overflow-tooltip />
        <el-table-column prop="instance.processName" label="流程名称" width="150" />
        <el-table-column prop="instance.applicantName" label="申请人" width="120" />
        <el-table-column prop="task.taskName" label="当前节点" width="150" />
        <el-table-column prop="task.createTime" label="到达时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.task.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleTask(scope.row)">处理</el-button>
            <el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 处理任务对话框 -->
    <el-dialog title="处理审批" :visible.sync="showTaskDialog" width="600px">
      <div v-if="currentTask.instance">
        <div class="task-info">
          <h4>{{ currentTask.instance.title }}</h4>
          <p><strong>申请人：</strong>{{ currentTask.instance.applicantName }}</p>
          <p><strong>申请时间：</strong>{{ formatDate(currentTask.instance.startTime) }}</p>
        </div>
        
        <el-divider></el-divider>
        
        <div class="form-data">
          <h4>表单内容</h4>
          <div v-if="formDataObj" class="form-data-content">
            <div v-for="(value, key) in formDataObj" :key="key" class="form-item">
              <span class="form-label">{{ key }}:</span>
              <span class="form-value">{{ value }}</span>
            </div>
          </div>
        </div>
        
        <el-divider></el-divider>
        
        <el-form :model="taskForm" label-width="100px">
          <el-form-item label="审批意见">
            <el-input
              v-model="taskForm.comment"
              type="textarea"
              :rows="3"
              placeholder="请输入审批意见"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <div slot="footer">
        <el-button @click="showTaskDialog = false">取消</el-button>
        <el-button type="danger" @click="handleReject">拒绝</el-button>
        <el-button type="primary" @click="handleApprove">同意</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMyTasks, completeTask } from '@/api/approval'

export default {
  name: 'MyTasks',
  
  data() {
    return {
      tasks: [],
      showTaskDialog: false,
      currentTask: {},
      taskForm: {
        comment: ''
      }
    }
  },
  
  computed: {
    formDataObj() {
      if (this.currentTask.instance && this.currentTask.instance.formData) {
        try {
          return JSON.parse(this.currentTask.instance.formData)
        } catch (e) {
          return {}
        }
      }
      return {}
    }
  },
  
  created() {
    this.loadTasks()
  },
  
  methods: {
    loadTasks() {
      getMyTasks().then(res => {
        this.tasks = res.data
      })
    },
    
    handleTask(row) {
      this.currentTask = row
      this.taskForm.comment = ''
      this.showTaskDialog = true
    },
    
    viewDetail(row) {
      this.$router.push(`/approval/detail/${row.instance.id}`)
    },
    
    handleApprove() {
      this.completeTask('approve')
    },
    
    handleReject() {
      if (!this.taskForm.comment) {
        this.$message.warning('拒绝时必须填写审批意见')
        return
      }
      this.completeTask('reject')
    },
    
    completeTask(action) {
      const data = {
        taskId: this.currentTask.task.id,
        action: action,
        comment: this.taskForm.comment
      }
      
      completeTask(data).then(() => {
        this.$message.success('处理成功')
        this.showTaskDialog = false
        this.loadTasks()
      })
    },
    
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return d.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.my-tasks-container {
  background: #fff;
  border-radius: 8px;
}

.task-info {
  margin-bottom: 15px;
}

.task-info h4 {
  margin-bottom: 10px;
  color: #303133;
}

.task-info p {
  margin: 5px 0;
  color: #606266;
}

.form-data h4 {
  margin-bottom: 10px;
  color: #303133;
}

.form-data-content {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.form-item {
  margin-bottom: 10px;
  display: flex;
}

.form-label {
  font-weight: 500;
  color: #606266;
  min-width: 100px;
}

.form-value {
  color: #303133;
}
</style>

